<!--<template>-->
<!--	<div id="Favourite">-->
<!--		<el-container>-->
<!--			<el-main>-->
<!--				<div>-->
<!--					<el-header style="height: 20px;">-->
<!--&lt;!&ndash;						<ul>&ndash;&gt;-->
<!--&lt;!&ndash;							<li @click='changePage("Index")'>首页</li>&ndash;&gt;-->
<!--&lt;!&ndash;						</ul>&ndash;&gt;-->
<!--					</el-header>-->
<!--					<el-table class="" ref="buyerTable" border stripe-->
<!--						:data="cartList.slice((currentPage-1)*pageSize,currentPage*pageSize)" tooltip-effect="dark"-->
<!--						style="width: 100%" height="520"-->
<!--						:row-key="getkey">-->
<!--						<el-table-column type="selection" width="55" :reserve-selection="true">-->
<!--						</el-table-column>-->
<!--						<el-table-column label="商品名称" prop="name" width="130" />-->
<!--&lt;!&ndash;						<el-table-column label="图片" width="100" align="center">&ndash;&gt;-->
<!--&lt;!&ndash;							<template slot-scope="scope">&ndash;&gt;-->
<!--&lt;!&ndash;								<el-popover placement="right" trigger="hover">&ndash;&gt;-->
<!--&lt;!&ndash;									<el-image slot="reference" :src="scope.row.img"  width="80" height="80" @click="getImgUrl(scope.row.img)"/>&ndash;&gt;-->
<!--&lt;!&ndash;									<el-image style="width: 250px; height: 250px" :src="scope.row.img" fit="cover" />&ndash;&gt;-->
<!--&lt;!&ndash;								</el-popover>&ndash;&gt;-->
<!--&lt;!&ndash;							</template>&ndash;&gt;-->
<!--&lt;!&ndash;						</el-table-column>&ndash;&gt;-->
<!--						<el-table-column label="商品简介" prop="title" />-->
<!--						<el-table-column label="操作" width="80" align="center">-->
<!--							<template slot-scope="scope">-->
<!--								<el-button type="text" size="small" icon="el-icon-star-off" @click="getCartList(scope.row.id)">加入购物车</el-button>-->
<!--								<el-tooltip class="item" effect="dark" content="删除" placement="top">-->
<!--									<el-button size="mini" type="danger" icon="el-icon-delete"-->
<!--										@click="deleteCartGoods(scope.row)" />-->
<!--								</el-tooltip>-->
<!--							</template>-->
<!--						</el-table-column>-->
<!--					</el-table>-->
<!--					<div class="cart-option">-->
<!--						<el-button type="danger" @click="batchDeleteCartGoods">Delete</el-button>-->
<!--					</div>-->
<!--					&lt;!&ndash; 分页 &ndash;&gt;-->
<!--					<div class="block" style="margin-top:15px;">-->
<!--						<el-pagination align='center' @size-change="handleSizeChange"-->
<!--							@current-change="handleCurrentChange" :current-page="currentPage"-->
<!--							:page-sizes="[1,5,10,20,50,100]" :page-size="pageSize"-->
<!--							layout="total, sizes, prev, pager, next, jumper" :total="cartList.length">-->
<!--						</el-pagination>-->
<!--					</div>-->
<!--				</div>-->
<!--			</el-main>-->
<!--		</el-container>-->
<!--	</div>-->
<!--</template>-->
<template>
  <div>
    <el-table
        class="table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;header-aline:center"
        @select="handleSum"
        @select-all="handleSum"
        @selection-change="handleSelectionChange">
      >
      <!--复选框-->
      <el-table-column  type="selection" min-width="55"></el-table-column>

      <el-table-column prop ='gimgpath' label="商品预览" min-width="20%">
        <template slot-scope="scope">
          <el-image :src="scope.row.gimgpath[0]"></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="gname" label="商品名称" min-width="10%" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.gname }}
        </template>
      </el-table-column>

      <el-table-column prop="gprice" label="价格" min-width="10%" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.gprice}}￥</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="15%" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="text" icon="el-icon-shopping-cart-1" @click="JiaShop(scope.row.gid)">购物车</el-button>
            <el-button type="text" icon="el-icon-delete" @click="deletex(scope.row.gid)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <div style="display: flex;height: 100px">
      <div class="style1">
        <el-button type="text" icon="el-icon-delete" @click="deletexall()">全部删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {delStar, jiaShopCart, reqShopCart} from "@/api";

export default {
  data() {
    return {
      // 		cartList: [{
      // 				id: '1',
      // 				name: '美乐斯电子琴',
      // 				// img: require('./images/1.jpg'),
      // 				title: '电子琴61键多功能成人儿童中小学生教学电子琴乐器',
      // 				price: '458.0',
      // 			}, {
      // 				id: '2',
      // 				name: '美乐斯电子琴',
      // 				// img: require('./images/1.jpg'),
      // 				title: '电子琴61键多功能成人儿童中小学生教学电子琴乐器',
      // 				price: '458.0',
      // 			}, {
      // 				id: '3',
      // 				name: '美乐斯电子琴',
      // 				// img: require('./images/1.jpg'),
      // 				title: '电子琴61键多功能成人儿童中小学生教学电子琴乐器',
      // 				price: '458.0',
      // 			},
      // 		],
      // 		selectGoodsList: [],
      // 		multipleSelection: [],
      // 		select_lines: 0,
      // 		currentPage: 1, // 当前页码
      // 		total: 20, // 总条数
      // 		pageSize: 5, // 每页的数据条数
      // 		activeIndex: '1',
      //
      // 	}
      // },
      tableData:[{
        gid: '',
        gimgpath:'',
        gname: '',
        gprice:'',
      }],
      dialogVisible: false,
      multipleSelection: [],
    }
  },
  methods: {
    getStar(){
      if(this.$route.query.gid) {
        const gid = this.$route.query.gid;
        reqShopCart(gid).then(res => {
          this.tableData = res.data;

        })
      }
    },
    deletex(gid){
      // alert("mscm dzsmc");
      let data = {
        "gid": gid
      }
      delStar(data).then(res=>{
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.getStar();
      })
    },
    JiaShop(gid){
      let data = {
        "gid": gid
      }
      jiaShopCart(data).then(res=>{
        this.$message({
          message: res.msg,
          type: 'success'
        });
      })
    },
    // 	getkey(row) {
    // 		return row.id;
    // 	},
    // 	//select change
    // 	handleSelectionChange(val) {
    // 		this.multipleSelection = val;
    // 		console.log(this.multipleSelection.length);
    // 	},
    //
    // 	// 清空选择的值
    // 	clearSelect() {
    // 		this.$refs.buyerTable.clearSelection()
    // 	},
    //
    // 	//改变每页显示记录的条数
    // 	handleSizeChange(val) {
    // 		console.log(`每页 ${val} 条`);
    // 		this.currentPage = 1;
    // 		this.pageSize = val;
    // 	},
    // 	handleCurrentChange(val) {
    // 		console.log(`当前页: ${val}`);
    // 		this.currentPage = val;
    // 	},
    //
    // 	//编辑按钮
    // 	handleEdit(index, row) {
    // 		console.log(index, row);
    // 	},
    //
    // 	//删除按钮
    // 	handleDelete(index, row) {
    // 		console.log(index, row);
    // 	},
    // 	//获取图片路径
    // 	getImgUrl(row){
    // 		console.log(row);
    // 	},
    // 	//页面跳转事件
    // 	changePage(path) {
    // 		var pathNow = this.$route.path;
    // 		var pathSplit = pathNow.split("/");
    // 		var nameNow = pathSplit[pathSplit.length - 1];
    // 		if (path == "Index") {
    // 			console.log(pathSplit);
    // 			console.log(nameNow);
    // 			console.log('/Index/' + nameNow);
    // 			this.$router.push('/Index/' + nameNow);
    // 		} else if (path == "ShopCart") {
    // 			console.log('/ShopCart/' + nameNow)
    // 			this.$router.push('/ShopCart/' + nameNow);
    // 		} else if (path == "Favorites") {
    // 			console.log('/Favorites/' + nameNow)
    // 			this.$router.push('/Favorites/' + nameNow);
    // 		}  else if (path == "PerCenter"){
    // 			console.log('/PerCenter/' + nameNow)
    // 			this.$router.push('/PerCenter/' + nameNow);
    // 		}else if (path == "exit"){
    // 			console.log('/PerCenter/' + nameNow)
    // 			this.$router.push('/login');
    // 		}
    // 	},
    // 	tableRowClassName({
    // 		//row,
    // 		rowIndex
    // 	}) {
    // 		if (rowIndex === 0) {
    // 			return 'th';
    // 		}
    // 		return '';
    // 	},
    // 	switchChange() {
    // 		this.istag = !this.istag;
    //
    // 	},
    //
    // 	current_change: function(currentPage) {
    // 		this.currentPage = currentPage;
    // 	},
    // 	created: function() {
    // 		this.total = this.tableData.length;
    // 	},
    //
    // 	// 获取购物车列表
    // 	async getCartList() {
    // 		const {
    // 			data: res
    // 		} = await this.$http.get(getCartListUrl)
    // 		if (res.code !== 200) return this.$message.error(res.msg)
    // 		this.cartList = res.data.list
    // 		this.cartList.forEach(item => {
    // 			// 因为后台接口返回的商品SKU是对象的格式，我们取它的值，然后重新赋值使用
    // 			if (item.skuJson) {
    // 				item.sku = []
    // 				for (let i in item.skuJson) {
    // 					item.sku.push(item.skuJson[i])
    // 				}
    // 				item.sku = item.sku.join('，')
    // 			}
    // 		})
    // 	},
    //
    // 	// 购物车选择事件（elemenUI表格勾选保存的值）
    // 	cartSelectionChange(val) {
    // 		this.multipleSelection = val;
    //
    // 	},
    // 	// 商品数量文本框改变事件
    // 	cartGoodsAmountChange(e, orderInfo) {
    // 		if (e.target.value <= 0) {
    // 			orderInfo.amount = 1
    // 			return this.$message.error('商品数量不能小于0')
    // 		}
    // 	},
    // 	// 商品数量加1
    // 	addAmountCount(orderInfo) {
    // 		++orderInfo.amount
    // 	},
    // 	// 商品数量减1
    // 	subtractAmountCount(orderInfo) {
    // 		if (orderInfo.amount <= 1) {
    // 			return this.$message.error('商品数量不能小于0')
    // 		}
    // 		--orderInfo.amount
    // 	},
    // 	// 单个删除购物车商品
    // 	deleteCartGoods(index, row) {
    // 		console.log(index, row);
    // 		this.$confirm('此操作将移除收藏夹的商品, 是否继续?', '提示', {
    // 			confirmButtonText: '确定',
    // 			cancelButtonText: '取消',
    // 			type: 'warning'
    // 		}).then( () => {
    // 			this.$message({
    // 				type: 'success',
    // 				message: '删除成功!',
    // 				delete: row.splice(index, 1)
    // 			});
    // 		}).catch(() => {
    // 			this.$message({
    // 				type: 'info',
    // 				message: '已取消删除'
    // 			});
    // 		})
    // 	},
    // 	// 批量删除收藏夹商品
    // 	batchDeleteCartGoods() {
    // 		if (this.multipleSelection.length > 0) {console.log()} else {
    // 			return this.$message.error('请勾选要移除收藏夹的商品')
    // 		}
    // 		this.$confirm('此操作将移除勾选的收藏夹的商品, 是否继续?', '提示', {
    // 			confirmButtonText: '确定',
    // 			cancelButtonText: '取消',
    // 			type: 'warning'
    // 		}).then(async () => {
    // 			// 这里调用接口删除的方法
    // 			this.delFavorites(this.multipleSelection);
    // 		}).catch((e) => {
    // 			console.log(e)
    // 			this.$message.info('已取消删除')
    // 		})
    // 	},
    // 	handleSelect(key, keyPath) {
    // 		console.log(key, keyPath);
    // 	}
    // },
    // computed: {
    // 	cartTotalPrice() {
    // 		let sum = 0
    // 		this.multipleSelection.forEach(item => {
    // 			sum += item.price * item.amount
    // 		})
    // 		return sum.toFixed(2);
    // 	},
  },
  mounted() {
    this.getStar();
  }
}
</script>

<style scoped>
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#Favourite {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.el-header {
  background-color: #cccccc;
  color: #333;
  text-align: center;
  height: 5%;
  line-height: 25px;
}

.el-main {
  text-align: center;
  width: 100%;
  height: 95%;
}

.el-main>div {
  width: 70%;
  margin: 0px auto;
  padding-top: 20px;
}

.el-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.el-header>ul {
  position: absolute;
  right: 5px;
}

.el-header>ul>li {
  float: left;
  list-style: none;
  margin: 5px;
  user-select: none;
}

.el-header>ul>li:not(:first-child):hover {
  color: red;
  text-decoration: underline;
}

.el-avatar {
  position: absolute;
  left: -30px;
  top: 2px;
  width: 33px;
  height: 30px;
  color: #42B983;
}

.el-avatar--icon {
  font-size: 35px;
}

input[type="search"] {
  width: 600px;
  height: 35px;
  font-size: 15px;
  outline: none;
  border: 2px solid #0000FF;
  border-radius: 5px;
}

.el-main>div>p>.el-button {
  width: 60px;
  height: 35px;
  font-size: 15px;
  margin-bottom: 20px;
}
.item {
  width: 50px;
  height: 30px;
}
.cart-option {
  position: relative;
  height: 31px;
  background-color: #c3c3c3;
  border: 1px solid transparent;
}
.cart-option>.el-button {
  position: absolute;
  left: 5px;
  top: 2px;
  height: 25px;
  line-height: 25px;
}

</style>
